<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <title>用户登录</title>
  <link rel="stylesheet" type="text/css" href="./assets/lib/iview/styles/iview.css" />
  <link rel="stylesheet" type="text/css" href="./assets/css/default.css" />
  <style type="text/css">
    .login {
      width: 100%;
      height: 100%;
      background-image: url(./assets/images/login-bg.jpg);
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .login-con {
      position: absolute;
      right: 160px;
      top: 50%;
      -webkit-transform: translateY(-60%);
      transform: translateY(-60%);
      width: 300px;
    }

    .login-con-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }

    .login-con .form-con {
      padding: 10px 0 0;
    }

    .login-con .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  </style>
  <script src="./assets/lib/vue/vue-2.5.17.min.js"></script>
  <script src="./assets/lib/iview/iview.js"></script>
</head>

<body>
  <div id="app">
    <div class="login">
      <div class="login-con">
        <Card icon="log-in" title="欢迎登录" :bordered="false">
          <div class="form-con">
            <i-form ref="loginForm" :model="form" :rules="rules">
              <form-item prop="userName">
                <i-input v-model="form.userName" placeholder="请输入用户名">
                <span slot="prepend">
                  <Icon :size="16" type="ios-person"></Icon>
                </span>
                </i-input>
              </form-item>
              <form-item prop="password">
                <i-input type="password" v-model="form.password" placeholder="请输入密码">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
                </i-input>
              </form-item>
              <form-item>
                <i-button @click="handleSubmit" type="primary" long>登录</i-button>
              </form-item>
            </i-form>
            <p class="login-tip">输入任意用户名和密码即可</p>
          </div>
        </Card>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: function() {
        return {
          form: {
            userName: 'admin',
            password: '123456'
          },
          rules:{
            userName: { required: true, message: '账号不能为空', trigger: 'blur' },
            password: { required: true, message: '密码不能为空', trigger: 'blur' }
          }            
        }
      },
      methods: {
        handleSubmit: function() {
          window.location.href = "./index.html"
        }
      }
    });
  </script>
</body>

</html>